<template>
	<div class="toolbar">
		<div class="toolbar-left">
			<!-- logo -->
			<img :src="require('@/assets/image/logo.png')" />
			<!-- 命名 -->
			<el-input v-model="name"></el-input>
		</div>
		<div class="toolbar-right">
			<el-button icon="el-icon-folder-checked" type="primary" @click="save">保存</el-button>
			<el-button icon="el-icon-download" @click="downloadUE">下载</el-button>
			<el-button icon="el-icon-monitor" @click="preview">预览</el-button>
			<el-button icon="el-icon-switch-button">返回</el-button>
		</div>

		<!-- 下载弹窗 -->
		<el-dialog title="离线下载" :visible.sync="dialogVisible" width="width">
			<div class="dialogWrapper">
				<div class="file">
					<i v-if="tips === '打包已完成，点击下载按钮下载'" class="el-icon-folder-opened complete"></i>
					<i v-else-if="tips === '已下载'" class="el-icon-folder-opened hasdown"></i>
					<i v-else-if="tips === '打包失败'" class="el-icon-folder-opened failpackage"></i>
					<i v-else class="el-icon-folder-opened"></i>
				</div>
				<span>
					{{ tips }}
					<span>{{ tipPoint == 0 ? '.' : tipPoint == 1 ? '..' : tipPoint == 2 ? '...' : '' }}</span>
				</span>
			</div>
			<div slot="footer">
				<el-button type="primary" v-if="tips == '打包失败' || tips == '已下载'" @click="downloadAgain">
					重新下载
				</el-button>
				<el-button v-else type="primary" @click="download" :disabled="!link">下 载</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { downloadUE } from '@/utils/api';
export default {
	name: 'Toolbar',
	data() {
		return {
			name: '新建案例',
			dialogVisible: false,
			tips: '',
			tipPoint: 0 /* 加载点个数 */,
			timer: '' /* 计时器 */,
			link: '' /* 下载链接 */
		};
	},
	destroyed() {
		this.clearTime();
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},

		preview() {
			if ($xy.get('jscId', 0)) {
				let url = window.location.origin;
				window.open(
					`${url}/web/cdszls/fly/html/show.html?id=${$xy.get('jscId', 0)}&ip=${window.websocketIp}#/`
				);
			}
		},

		save() {
			$ue4.saveAll();
		},

		// 清除计时器
		clearTime() {
			clearTimeout(this.timer);
			this.timer = '';
		},

		async downloadUE() {
			this.dialogVisible = true;

			if (this.tips) {
				return;
			}

			this.tips = '正在请求资源';

			this.timer = setInterval(() => {
				if (this.tipPoint < 3) {
					this.tipPoint++;
				} else {
					this.tipPoint = 0;
				}
			}, 500);

			setTimeout(() => {
				this.tips = '资源打包中';
			}, 3000);

			const res = await downloadUE();

			this.clearTime();
			this.tipPoint = 0;

			if (res.success) {
				this.link = res.data ? res.data : '';

				if (this.link) {
					this.tips = '打包已完成，点击下载按钮下载';
				} else {
					this.tips = '打包失败';
				}
			} else {
				this.tips = '打包失败';
				this.$message.error(res.msg);
			}
		},

		downloadAgain() {
			this.tips = '';
			this.link = '';
			this.downloadUE();
		},

		download() {
			this.tips = '已下载';
			window.open(this.link);
		}
	}
};
</script>

<style lang="scss">
.toolbar {
	font-size: 14px;
	width: 100%;
	height: 100%;
	padding: 5px 12px 5px 12px;
	background-color: $--xy-color-deep;
	border-bottom: $--xy-border-deep;
	display: flex;
	justify-content: space-between;
	@include xy-stopselect;

	.toolbar-left {
		display: flex;
		align-items: center;

		input {
			background-color: transparent;
			border: none;
			color: $--xy-color-lighter;
			padding-left: 5px;
			height: 28px;
			width: 80px;
			margin-left: 20px;

			&:focus {
				border: 1px solid #fff;
				box-shadow: 1px 1px 3px #1075fa inset, -1px -1px 3px #1075fa inset;
			}
		}

		img {
			height: 24px;
			width: 24px;
		}
	}

	.toolbar-right {
		@include xy-dfc;
	}

	.dialogWrapper {
		display: flex;
		align-items: center;

		i {
			font-size: 32px;
			color: #ccc;
			margin-right: 10px;
		}

		i.complete {
			color: #1075fa;
		}

		i.hasdown {
			color: #00c000;
		}

		i.failpackage {
			color: #fa7510;
		}

		span {
			color: #ccc;
		}
	}
}
</style>
